<template>
  <section class="content">
    <!--查询条件start-->
    <div class="option">
      <p class="title">店铺查询</p>
           <form class="form-horizontal">
        <div class="box-body">
          <div class="clearfix row">
            <div class="col-sm-4 flex"  style="align-items: initial">
                <label class="min-width control-label">平台渠道：</label>

                <div class="inline-block">
                  <div class="m-b-20" v-if="platFormButtn.length == 0">
                    <label class="payment">
                      <i class="fa fa-warning"></i>
                      您当前还未添加仓库
                      <router-link to="/v1/goods/category/getList" class="text-red text-bold">【立即添加】</router-link>
                    </label>
                  </div>
                  <div v-else>
                    <el-select v-model="shopFindParam.ptId" class="full-cell">
                      <el-option label="全部" value=""></el-option>
                      <el-option v-for="platform in platFormButtn" :key="platform.id" :label="platform.platformName" :value="platform.id"></el-option>
                    </el-select>
                  </div>

                </div>
            </div>
            <div class="col-sm-4 flex" style="align-items: initial">
                <label class="min-width control-label">状态：</label>
                <div class="inline-block">
                  <el-select v-model="shopFindParam.status" class="full-cell">
                    <el-option v-for="status in shopStatusButtn" :key="status.status" :label="status.name" :value="status.status"></el-option>
                  </el-select>
                </div>
            </div>
          <!-- </div>
          <div class="clearfix row"> -->
            <div class="col-sm-4 flex" style="align-items: initial">
              <el-button type="success" class="but-search" @click="handleSearch">搜索</el-button>
             <el-button type="primary"   class="addBrand" @click="handleAdd">新增</el-button>
            </div>
          </div>
        </div>
      </form>
    </div>
    <!--查询条件end-->
    <!--数据展示start-->
     <div class="table clearfix">
        <el-table
          ref="shopList"
          :data="shopList"
          tooltip-effect="dark"
          style="width: 100%;font-size:14px;"
          :header-cell-style="{background:'#F5F7FA',height:'60px','line-height':'60px',color:'#606266','font-size':'14px'}"
          @row-click="clickRow"
          @selection-change="handleSelectionChange">
          <el-table-column
          label="序号" min-width="8%"  align="center"  >
          <template slot-scope="scope">
              {{scope.$index+1}}
            </template>
          </el-table-column>
          <el-table-column
          prop="ptName" label="平台" min-width="10%"  align="center"  >
          </el-table-column>
          <el-table-column
            prop="name"
            label="店铺名"
            min-width="15%"  align="center" >
          </el-table-column>
          <el-table-column
            prop="storeUrl"
            label="站点域名"
            min-width="15%"  align="center" >
          </el-table-column>
          <el-table-column
            prop="creatTime"
            label="创建时间"
            min-width="15%"  align="center" >
          </el-table-column>
          <el-table-column
            prop="stopTime"
            label="过期时间"
            min-width="15%"
            show-overflow-tooltip  align="center" >
          </el-table-column>
           <el-table-column
            label="状态"
            min-width="12%"  align="center" >
            <template slot-scope="scope">
              {{getShopStaus(scope.row.status)}}
            </template>
          </el-table-column>
          <el-table-column
          fixed="right"
          label="操作"
          min-width="18%"  align="center" >
          <template slot-scope="scope">
            <div class="myicon-option">
              <i class="el-icon-myedit" title="编辑"  @click="handleModify(scope.row)" data-toggle="modal"
                          data-target="#modal-default" ></i>
              <i :class="getClassShopStatus(scope.row.status)" :title="scope.row.status ==1 ? '禁用' : '启用'"
                        @click="editShopStatus(scope.row.id,addShopStatus(scope.row.status))"></i>
              <i class="el-icon-mydelete"  title="删除"  @click="deleteShop(scope.row.id)"
                          v-if="$_has('sys:shop:del')" ></i>
                        </div>
          </template>
        </el-table-column>
        </el-table>
        <el-pagination class="page"
            background
            layout="total,prev, pager, next"
            :total="pages.shopPageList.total"
            :pager-count="6"
            :page-size="pages.shopPageList.pageSize"
            :current-page.sync="shopFindParam.page"
            @current-change ='pagechange'
            >
        </el-pagination>
      </div>
    <!--数据展示end-->

    <!-- /.row -->
    <!-- <div class="modal fade" id="modal-default">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" @click="clearForm()" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">添加店铺</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal max_height">
              <div class="">
                <div class="form-group">
                  <div class="col-sm-12 flex">
                    <label for="" class="control-label min-width">平台：</label>
                    <div class="inline-block">
                      <select class="form-control" v-model="ptId">
                        <option value="">请选择</option>
                        <option v-for="(platForm,index) in platFormSelectList" :key="index" v-bind:value="platForm.id">{{platForm.platformName}}</option>
                      </select>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-sm-12 flex">
                    <label for="" class="control-label min-width">店铺名称：</label>
                    <div class="inline-block">
                      <input type="text" v-model="shopName" class="form-control" placeholder="请输入自定义店铺名称">
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-sm-12 flex">
                    <label for="" class="control-label min-width">发货仓库：</label>
                    <div class="inline-block">
                      <select class="form-control" v-model="whId">
                        <option value="">请选择发货仓库</option>
                        <option v-for="(wareHose,index) in wareHoseSelectList" :key="index" v-bind:value="wareHose.id">{{wareHose.name}}</option>
                      </select>
                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" @click="clearForm()" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary"  @click="getAuthorUrl()">下一步</button>
          </div>
        </div>

      </div>

    </div> -->
    <!-- <div class="modal fade" id="accredit">
      <div class="modal-dialog" style="width: 400px!important">
        <div class="modal-content">
          <div class="modal-header" style="background: #FFF;">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">授权信息</h4>
          </div>
          <div class="modal-body">
            <p>{{message}}</p >
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default pull-left" data-dismiss="modal" @click="addShop()">是</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal" >否</button>
          </div>
        </div>

      </div>

    </div> -->

    <!-- <Panel :expandable="false" :expand="true">
      <template slot="title">筛选查询</template>
      <template slot="body">
          <el-form label-width="100px">
              <el-row>
                  <el-col :span="6">
                      <el-form-item label="平台渠道">
                        <div v-if="platFormButtn.length == 0">
                            您当前还未添加仓库
                            <router-link to="/v1/goods/category/getList" class="text-red text-bold">【立即添加】</router-link>
                        </div>
                        <el-select v-model="platformId">
                          <el-option key="" label="全部" value=""></el-option>
                          <el-option v-for="p in platFormButtn" :key="p.id" :label="p.platformName" :value="p.id"></el-option>
                        </el-select>
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item label="状态">
                        <el-select v-model="status">
                          <el-option v-for="p in shopStatusButtn" :key="p.status" :label="p.name" :value="p.status"></el-option>
                        </el-select>
                      </el-form-item>
                  </el-col>
                  <el-col :span="6" style="margin-left: 12px">
                      <el-button type="success" @click="handleSearch">搜索</el-button>
                      <el-button type="primary" @click="handleAdd">新增</el-button>
                  </el-col>
              </el-row>
          </el-form>
      </template>
    </Panel> -->

    <!-- <Panel :expandable="false" :hasTitle="false" :expand="true">
            <template slot="title"></template>
            <template slot="body">
                <el-table :data="list" header-row-class-name="header-class">
                    <el-table-column type="index" label="序号" align="center">
                    </el-table-column>
                    <el-table-column prop="ptName" label="平台" align="center">

                    </el-table-column>
                    <el-table-column prop="name" label="店铺名" align="center">

                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" align="center">

                    </el-table-column>
                    <el-table-column prop="stopTime" label="过期时间" align="center">

                    </el-table-column>
                    <el-table-column prop="statusStr" label="状态" align="center">

                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                          <el-button type="text" @click="handleStop">停用</el-button>
                          <el-button type="text" @click="handleModify">修改</el-button>
                          <el-button type="text" @click="handleDelete">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="clear-fix">
                    <el-pagination
                        style="float: right; margin-top: 20px;"
                        background
                        layout="prev, pager, next"
                        @current-change="handleCurrentChange"
                        :current-page="searchParam.page"
                        :total="searchParam.total">
                    </el-pagination>
                </div>
            </template>
        </Panel> -->

        <el-dialog title="新增店铺" :visible.sync="addVisible" width="1200px">
          <the-store-list v-if="addVisible" @commit="handleCommit"></the-store-list>
          <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button @click="addVisible = false">关闭</el-button>
            </div>
        </el-dialog>
        <!-- <el-dialog title="修改店铺" :visible.sync="modifyVisible" width="1200px"> -->
          <ebay-store v-if="modifyVisible" mode="edit" :id="storeId" @commit="handleModifyCommit"></ebay-store>
          <!-- <div slot="footer" class="dialog-footer"> -->
                <!-- <el-button @click="modifyVisible = false">关闭</el-button> -->
            <!-- </div> -->
        <!-- </el-dialog> -->
  </section>
</template>

<script>
  import instance from '@/api/index.js'
  import pagination from '@/components/common/pageComponent'
  import TheStoreList from './theStoreList'
  import EbayStore from '@/pages/store/ebayStore'

  export default {
    name: "listOfAuthorizedStores",
    data() {
      return {
        // mode: "",
        storeId: "",
        addVisible: false,
        modifyVisible: false,
        shopName:'',//店铺名
        ptId:'',//平台id
        whId:'', //仓库id
        message:"您是否完成授权？",
        addShopForm :{}, //新增店铺数据
        shopList:[],
        isToUI:false,
        authorUrl:{ url:'',
          sessionId:''
        },
        activePlatFormClass: -1,//平台addClass样式
        activeShopStatusClass: 0,//店铺状态addClass样式
        shopFindParam: {},//店铺查询条件
        platFormButtn: [], //平台查询按钮
        platFormSelectList:[], //平台下拉列表
        wareHoseSelectList :[],//仓库下拉列表
        shopStatusButtn: [{name: '全部', status: null}, {name: '已启用', status: "1"}, {name: '已停用', status: "0"},{name: '已过期', status: "2"}],//店铺状态按钮
        shopStatus: new Map(), //店铺状态
        editShopStatusButtn: new Map(), //修改店铺按钮状态
        show: false,
        pages: {  //分页对象
          shopPageList: {
            total: 0,
            pageNum: 1,
            pageSize: 2
          }
        },
        searchParam: {
          page: 1,
          rows: 10,
          total: 0,
          currentPage:1
        },
        status: "",
        platformId: ""
      }
    },
    methods: {
      alertMessage:function(value){
        if (value) {
          this.$message({
            showClose: false,
            message: '操作成功!',
            type: 'success'
          });
        }else {
          this.$message({
            showClose: false,
            message: '操作失败!',
            type: 'error'
          });
        }
      },
      messageBox:function(message) {
        vm.$alert(message, '提示', {
          confirmButtonText: '确定',
        });
      },
      clearForm :function(){ //清除提交表单，解除绑定
        let vm = this;
        vm.shopName = '';
        vm.ptId = '';
        vm.whId = '';
      },
      addShopStatus :function(status){  //修改店铺状态传值
        if('1' == status){
          return '0';
        }else if('0' == status){
          return '1';
        }else {
          return '2';
        }
      },
      getShopList: function () { //店铺列表
        let vm = this;
        vm.shopFindParam.rows = 10;
        instance.post('/v1/author/getShoplist',vm.shopFindParam).then(function (data) {
          vm.shopList = data.data.data.list;
          vm.pages.shopPageList = data.data.data;
          console.log(data)
          // vm.show = false;//loading加载
        })
      },
      getEditShopStatuButtn: function (_key) { //修改店铺状态按钮
        return this.editShopStatusButtn.get(_key);
      },
      getShopStaus: function (_key) {  //获取店铺状态
        return this.shopStatus.get(_key);

      },
      editShopStatus: function (id,status) {
        let vm =this;
        let s = '';
        if(1 == status){
          s = '此操作将启用店铺，继续吗？'
        }else {
          s = '此操作将停用店铺，继续吗？'
        }
        vm.$confirm(s, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: ''
        }).then(() => {
          instance.post('/v1/author/startOrEnbaleShop',{"id":id,"status":status}).then(function (data) {
            vm.show = false;//loading加载
            vm.alertMessage(data.data.success);
            vm.getShopList();
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        })
      },
      //获取授权url，和sessionId,并跳转入ebay授权
      getAuthorUrl: function () {
        let vm = this;
        vm.addShopForm.name = vm.shopName;
        vm.addShopForm.ptId = vm.ptId;
        vm.addShopForm.whId = vm.whId;
        instance.post('/v1/author/getAuthUrl',vm.addShopForm).then(function (data) {
          vm.show = false;//loading加载
          if(data.data.data != null){
            vm.authorUrl = data.data.data;
            //此方法会被浏览器拦截
            window.open(vm.authorUrl.url+vm.authorUrl.sessionId);
            $('#accredit').modal('show');
          }else {
            vm.alertMessage(data.data.success)
            $('#modal-default').modal('hide');
          }

        })
      },
      deleteShop: function (id) {
        let vm = this;
        vm.$confirm('此操作将把店铺删除，继续吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: ''
        }).then(() => {
          instance.post('/v1/author/deleteShop/'+id,).then(function (data) {
            vm.show = false;//loading加载
            vm.alertMessage(data.data.success);
            vm.getShopList();
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        })
      },
      addShop: function () {  //店铺授权并保存店铺
        let vm = this;
        vm.addShopForm.name = vm.shopName;
        vm.addShopForm.ptId = vm.ptId;
        vm.addShopForm.whId = vm.whId;
        instance.post('/v1/author/addShop/'+vm.authorUrl.sessionId,vm.addShopForm).then(function (data) {
          let res = data.data;
          //如果是成功的弹窗告诉用户;
          if(res.success){
            vm.messageBox("店铺授权成功!");
            $("#modal-default").modal('hide');
          }else {
            vm.messageBox("店铺授权失败!");
          }
          vm.clearForm();
          vm.show = false;//loading加载
          vm.getShopList();
        })
      },
      getPlayOutWareHoseList: function () { //获取发货仓下拉框
        let vm = this;
        instance.post('/v1/warehouse/getWareHouseNoPageList').then(function (data) {
          vm.wareHoseSelectList = data.data.data;
          vm.show = false;//loading加载
        })
      },
      getPlatFormList: function () { //获取平台列表或者下拉框
        let vm = this;
        instance.post('/v1/author/getPlatFrom').then(function (data) {
          vm.platFormButtn = data.data.data;
          vm.platFormSelectList =data.data.data;
          vm.show = false;//loading加载
        })
      },
      // 获取分页
      pagechange: function (currentPage, display) {
        this.shopFindParam.page = currentPage;
        this.shopFindParam.rows = display;
        this.pages.shopPageList.pageNum = currentPage;
        this.getShopList();
      },
      handleSearch: function() {
        this.shopFindParam.page = 1;
        this.getShopList();
      },
      handleAdd: function() {
        this.addVisible = true;
        // this.mode = "edit";
      },
      // 修改店铺
      handleModify: function(data) {
        sessionStorage.setItem("statusoo",data.status);
        this.modifyVisible = true;
        // this.mode = "add";
        this.storeId = data.id;
        let self = this;
        this.$nextTick(()=>{
          $("#ebayStoreDialog").modal('show').on('hidden.modal.bs', function() {
            self.modifyVisible = false;
          });
        });
      },
      handleCommit() {
        this.addVisible = false;
        this.getShopList();
      },
      handleModifyCommit() {
        this.modifyVisible = false;
        this.getShopList();
      },
      getClassShopStatus(status){
        switch(status)
          {
            case "0":
            return 'el-icon-able'
          case "1":
             return 'el-icon-disable'
          case "2":
            return 'hiddenaa'

          default:
             return ''
          }

      }


    },
    created() {
      this.shopStatus.set("1", "已启用");
      this.shopStatus.set("0", "已停用");
      this.shopStatus.set("2", "已过期");
      this.editShopStatusButtn.set("1", "停用");
      this.editShopStatusButtn.set("0", "启用");
      this.editShopStatusButtn.set("2", "重新授权");
      //获取店铺状态操作按钮
      this.getClassShopStatus();
      this.getShopList();
      this.getPlatFormList();
      this.getPlayOutWareHoseList();

    },
    components: {
      pagination,
      TheStoreList,
      EbayStore
    }
  }
</script>

<style  lang="less">
  //v2
.content{

   .option{
      background: #fff;
      padding: 0 20px;
      .title{
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        border-bottom: 1px solid #dddddd;
        margin-bottom: 16px;
        position: relative;
        &::before{
            content: "";
            display: inline;
            height: 30px;
            width: 2px;
            background-color: #67C23A;
            position: absolute;
            left: -20px;
            top: 10px;
        }
      }


      .seach-input{
        color: #606266;
        font-size:14px;
        padding-bottom: 25px;

        .myinput{
          width: 370px;
          border-radius: 4px;
        }
      }
      .control-label{
        font-size: 14px;
        color: #606266;
        font-weight: normal;
      }
      button{
           padding: 12px 21px;
           margin:  0 9px;
           border-radius: 4px;
           &.but-search{
              margin-left: 20px;
           }
      }
  }
}
    .table{
    font-size: 14px;
    margin-top: 30px;
     background: #fff;
     padding:20px;
     clear: both;
     overflow: hidden;
     .page{
      margin: 20px 0 5px;
       float: right;
    }

  .cell{
       display: flex;
      justify-content: center;
      align-items: center;
      .myicon-option{
        font-size: 18px;
        color: #409EFF;
        margin: 6px;
        cursor:pointer;

         i{
          display: inline-block;
          width: 18px;
          height: 18px;
          margin:  0 12px;
          &.el-icon-myedit{
            background:url('../../../assets/img/myEdit.png') no-repeat;
            background-size: 100%;
          }
           &.el-icon-mydelete{
              background:url('../../../assets/img/myDelete.png') no-repeat;
              background-size: 100%;
            }
             &.el-icon-disable{
              background:url('../../../assets/img/myDisable.png') no-repeat;
              background-size: 100%;
            }
             &.el-icon-able{
              background:url('../../../assets/img/myAble.png') no-repeat;
              background-size: 100%;
            }
            &.hiddenaa{
             visibility:hidden
            }
         }
      }
  }
  }
 .el-dialog__header{
    border-bottom: 1px solid #E4E7ED;
}
.el-dialog__body {
    padding: 20px 20px;
}
.el-dialog__footer {
    padding: 0px 20px 30px;
}
.el-dialog__body {
    padding: 20px 20px 0;
}
</style>
